<template>
  <div class="page-box">
    <div>
      <div class="records">
        <div class="jianbian"></div>
        <div class="records_top">
          <div class="records_top1"><p>{{ $t('OrderPage.rwjl') }}</p>
            <p style="font-size: 0.56rem;">{{remainCnt}}</p></div>
          <div class="records_top1"><p>{{ $t('OrderPage.bsjygftg') }}</p>
            <p>{{ $t('OrderPage.sykycs') }}</p></div>
        </div>
        <div class="records_box">
          <nut-row class="top-group" type="flex" gutter="10" align="center">
            <nut-col :span="24" style="margin-bottom:1rem;">
              <nut-radiogroup v-model="sel_group">
                <nut-radio label="0">{{ $t('OrderPage.jxz') }}</nut-radio>
                <nut-radio label="2">{{ $t('OrderPage.shz') }}</nut-radio>
                <nut-radio label="3">{{ $t('OrderPage.ywc') }}</nut-radio>
                <nut-radio label="-1">{{ $t('OrderPage.ysb') }}</nut-radio>
              </nut-radiogroup>
            </nut-col>
          </nut-row>
        </div>
      </div>
      <nut-row style="padding-bottom: 1.3rem;" type="flex" gutter="10" align="center">
        <nut-col :span="24" style="margin-bottom:1rem;">
          <nut-infiniteloading
            @loadmore="onInfinite"
            :is-show-mod="true"
            :has-more="isHasMore"
            :is-loading="isLoading"
            :threshold="200"
          >
            <ul>
              <li v-if="[0,1,5].indexOf(item.task_proto.type) >= 0" v-for="(item, index) in data" :key="item.id" class="slip-main">
                <ul v-if="item.task_proto.type == 1" class="task-list">
                  <li class="task-title">{{item.task_proto.title}} <span v-if="item.status != 3" @click="handleClickThrow(item)" class="close-it">X</span></li>
                  <li>{{ $t('OrderPage.rwyq') }}: {{item.task_proto.desc}}</li>
                  <li v-if="item.task_proto.url">{{ $t('OrderPage.rwlj') }}: <span class="click-link" :class="item.clicked>0?'clicked':''" @click="handleClickLink(item.task_proto.url,item.id,item.task_proto.code)">$t('OrderPage.dksplj')</span></li>
                  <span class="money">{{item.task_proto.single_reward}}{{ $t('OrderPage.y') }}</span>
                  <li>{{ $t('OrderPage.cj') }}: {{item.created_at}}</li>
                  <li>{{ $t('OrderPage.sh') }}: {{item.updated_at}}</li>
                  <li style="margin:0;">
                    <nut-imagepicker
              @imgMsg="uploadImg"
              :width="60"
              :height="60"
              :max="1"
              v-if="item.status < 2"
              
            >
            </nut-imagepicker>
<!--                    <nut-button-->
<!--                      type="dashed"-->
<!--                      shape="circle"-->
<!--                      small-->
<!--                      @click="handleClickViewHis(item)"-->
<!--                      v-if="item.imgs"-->
<!--                    >-->
<!--                      {{ $t('OrderPage.ckrwjt') }}-->
<!--                    </nut-button>-->
                    <div style="padding-top:0.2rem;">
                      <span class="progress_tips" v-if="item.status == 1">{{ $t('OrderPage.ddtj') }}...</span>
                      <span class="progress_tips" v-if="item.status == 2">
                      <img src="/static/img/wait.png" alt="">
                      {{ $t('OrderPage.ddsh') }}~
                    </span>
                      <span class="progress_tips success" v-if="item.status == 3">
                      <img src="/static/img/passed.png" alt="">
                    </span>
                      <span class="progress_tips" v-if="item.status == -1" style="color:red;">
                      <img style="width:0.8rem;" src="/static/img/fail.png" alt="">
                      {{item.reply}}
                    </span>
                    </div>
                  </li>
                  <li v-if="item.status < 2" class="task-item-bottom">
                    <ul>
                      <li @click="handleClickConfirm(item)">
                        <div class="btn-submit">{{ $t('OrderPage.tjwcrw') }}</div>
                      </li>
<!--                      <li @click="handleClickThrow(item)">-->
<!--                        <span>{{ $t('OrderPage.sc') }}</span>-->
<!--                      </li>-->
                    </ul>
                  </li>
                </ul>
                <ul v-else-if="item.task_proto.type == 5" class="task-list">
                  <li class="task-title">{{item.task_proto.title}} <span v-if="item.status != 3" @click="handleClickThrow(item)" class="close-it">X</span></li>
                  <li>{{ $t('OrderPage.rwyq') }}: <span @click="handleClickViewDesc(item.task_proto.desc)" class="view-desc">👀{{ $t('OrderPage.ck') }}</span></li>
                  <li v-if="item.task_proto.url">{{ $t('OrderPage.rwlj') }}: <a target="_blank" :href="item.task_proto.url" @click="handleClickLink(item.task_proto.url,item.id,item.task_proto.code)">查看{{ $t('OrderPage.rwlj') }}</a></li>
                  <span class="money">{{item.task_proto.single_reward}}{{ $t('OrderPage.y') }}</span>
                  <li>{{ $t('OrderPage.cj') }}: {{item.created_at}}</li>
                  <li>{{ $t('OrderPage.sh') }}: {{item.updated_at}}</li>
                  <li style="margin: 0.5rem 0;">
                    <nut-button
                      type="dashed"
                      shape="circle"
                      class="btn-add-photo"
                      small
                      @click="handleClickAdd(item)"
                      v-if="item.status < 2"
                    >
                      {{ $t('OrderPage.tjrwwcjt') }}
                    </nut-button>
<!--                    <nut-button-->
<!--                      type="dashed"-->
<!--                      shape="circle"-->
<!--                      small-->
<!--                      @click="handleClickViewHis(item)"-->
<!--                      v-if="item.imgs"-->
<!--                    >-->
<!--                      {{ $t('OrderPage.ckrwjt') }}-->
<!--                    </nut-button>-->
                    <span class="progress_tips" v-if="item.status == 1">{{ $t('OrderPage.ytj') }}({{ $t('OrderPage.ddtj') }})</span>
                    <span class="progress_tips" v-if="item.status == 2">
                      <img src="/static/img/wait.png" alt="">
                      {{ $t('OrderPage.ddsh') }}~
                    </span>
                    <span class="progress_tips success" v-if="item.status == 3">
                      <img src="/static/img/passed.png" alt="">
                    </span>
                    <span class="progress_tips" v-if="item.status == -1" style="color:red;">
                      <img style="width:0.8rem;" src="/static/img/fail.png" alt="">
                      {{item.reply}}
                    </span>
                  </li>
                  <li v-if="item.status < 2" class="task-item-bottom">
                    <ul>
                      <li @click="handleClickConfirm(item)">
                        <div class="btn-submit">{{ $t('OrderPage.tjwcrw') }}</div>
                      </li>
                      <!--                      <li @click="handleClickThrow(item)">-->
                      <!--                        <span>{{ $t('OrderPage.scrw') }}</span>-->
                      <!--                      </li>-->
                    </ul>
                  </li>
                </ul>
                <ul v-else-if="item.task_proto.type == 0" class="task-list">
                  <li class="task-title">{{item.task_proto.title}} <span v-if="item.status != 3" @click="handleClickThrow(item)" class="close-it">X</span></li>
                  <li>
                    <div class="moment-text">{{item.task_proto.desc}}</div>
                  </li>
                  <li v-if="item.task_proto.imgs">
                    <dl class="moment-imgs">
                      <dt>{{ $t('OrderPage.xgtp') }}</dt>
                      <dd v-for="item in item.task_proto.imgs.split(',')">
                        <img :src="item.indexOf('http')>=0?item:$api_url.server+item" alt="">
                      </dd>
                    </dl>
                  </li>
                  <li v-else-if="item.task_proto.url">
                    {{ $t('OrderPage.rwlj') }}: <a target="_blank" :href="item.task_proto.url" @click="handleClickLink(item.task_proto.url,item.id,item.task_proto.code)">查看{{ $t('OrderPage.rwlj') }}</a>
                  </li>
                  <li class="moment-options">
                    <ul style="overflow: hidden;">
                      <li v-if="item.task_proto.imgs" @click="handleClickOpen(item.id,item.task_proto.imgs)">保存图片</li>
                      <li v-else-if="item.task_proto.url" :class="'copy-here--'+item.id" @click="copyText('.copy-here--'+item.id)" data-clipboard-action="copy" :data-clipboard-text="item.task_proto.url">复制链接</li>
                      <li :class="'copy-here-'+item.id" @click="copyText('.copy-here-'+item.id)" data-clipboard-action="copy" :data-clipboard-text="item.task_proto.desc">复制文本</li>
                    </ul>
                    <div class="open-wechat" @click="handleClickOpenWechat">{{ $t('OrderPage.dkwx') }}</div>
                  </li>
                  <span class="money">{{item.task_proto.single_reward}}元</span>
                  <li>{{ $t('OrderPage.cj') }}: {{item.created_at}}</li>
                  <li>{{ $t('OrderPage.sh') }}: {{item.updated_at}}</li>
                  <li style="margin: 0.5rem 0;">
                    <nut-button
                      type="dashed"
                      shape="circle"
                      class="btn-add-photo"
                      small
                      @click="handleClickAdd(item)"
                      v-if="item.status < 2"
                    >
                      {{ $t('OrderPage.tjrwwcjt') }}
                    </nut-button>
<!--                    <nut-button-->
<!--                      type="dashed"-->
<!--                      shape="circle"-->
<!--                      small-->
<!--                      @click="handleClickViewHis(item)"-->
<!--                      v-if="item.imgs"-->
<!--                    >-->
<!--                      查看任务截图-->
<!--                    </nut-button>-->
                    <span class="progress_tips" v-if="item.status == 1">{{ $t('OrderPage.ytj') }}({{ $t('OrderPage.ddtj') }})</span>
                    <span class="progress_tips" v-if="item.status == 2">
                      <img src="/static/img/wait.png" alt="">
                      {{ $t('OrderPage.ddsh') }}~
                    </span>
                    <span class="progress_tips success" v-if="item.status == 3">
                      <img src="/static/img/passed.png" alt="">
                    </span>
                    <span class="progress_tips" v-if="item.status == -1" style="color:red;">
                      <img style="width:0.8rem;" src="/static/img/fail.png" alt="">
                      {{item.reply}}
                    </span>
                  </li>
                  <li v-if="item.status < 2" class="task-item-bottom">
                    <ul>
                      <li @click="handleClickConfirm(item)">
                        <div class="btn-submit">{{ $t('OrderPage.tjwcrw') }}</div>
                      </li>
                      <!--                      <li @click="handleClickThrow(item)">-->
                      <!--                        <span>删除任务</span>-->
                      <!--                      </li>-->
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </nut-infiniteloading>
        </nut-col>
      </nut-row>
      <nut-popup :overlay="false" close-icon="cross" close-icon-position="top-right" closeable position="bottom" v-model="showDialog">
        <div class="input-box">
          <div>
            <nut-textbox @inputFunc="inputContent" :switchMax="true" :maxNum="100"></nut-textbox>
          </div>
          <div style="margin:0.7rem 0;text-align: left;">
            <nut-imagepicker
              @imgMsg="uploadImg"
              :width="60"
              :height="60"
              :max="1"
            >
            </nut-imagepicker>
          </div>
          <div>
            <nut-button
              small
              @click="handleClickSaveContent"
            >
              {{ $t('OrderPage.bc') }}
            </nut-button>
          </div>
        </div>
      </nut-popup>
      <nut-popup style="height:100%;" :overlay="false"  position="bottom" closeable close-icon="cross" v-model="showReviewDescDialog">
        <div class="review-box" v-html="review_desc">

        </div>
      </nut-popup>
      <nut-popup :overlay="false" close-icon="cross" close-icon-position="top-right" closeable position="bottom" v-model="showDialogHis">
        <div class="input-box">
          <div>
            <p style="text-align: left;">{{content_his}}</p>
          </div>
          <div v-if="img_arr.length>0" style="text-align: left;">
            <img class="img-history" v-for="item in img_arr" :src="item.indexOf('http')>=0?item:$api_url.server+item" alt="">
          </div>
        </div>
      </nut-popup>
    </div>
    <MainNav nav_index="3" ref="main_nav"/>
  </div>
</template>

<script>
import MainNav from "../components/MainNav";
import helper from "../utils/helper";

export default {
  name: 'OrderPage',
    components: {MainNav},
    data () {
        return {
            sel_group:'0',
            data: new Array(30),
            page: 0,
            num: 2,
            isHasMore: true,
            isLoading: false,
            isErr: false,
            timer: null,
            data:'',
            user:{},
            curr_item: '',
            showDialog: false,
            showDialogHis: false,
            imgList: [],
            content:'',
            content_his:'',
            img_arr:[],
            showReviewDescDialog: false,
            review_desc:'',
            remainCnt: 0,
            file:''
        }
    },
    methods:{
        inputContent(val){
            this.content = val;
        },
        shiftTab(index){

        },
        getRemainCnt(){
            let loading = this.$toast.loading();
            this.$axios.get(this.$api_url.remain_cnt).then((res)=>{
                console.log(res);
                this.remainCnt = res.data
            }).catch((err)=>{
                this.$toast.fail(err.message);
            }).then(()=>{
                loading.hide();
            })
        },
        handleClickLink(url,id,code){
            this.increaseClick(id);
            let u = navigator.userAgent;
            let isPC = u.indexOf('Windows') > -1 ; 
      
            if(isPC||!code){
                window.open(url);
            }else{
                //window.location.href='snssdk1128://aweme/detail/'+code;//,'_self';
                window.open('snssdk1128://aweme/detail/'+code,'_self');
            }

            
            
        },
        handleClickOpen(id,img_str){
            let loading ="";
            try{
                let args = {
                    type:'moment',
                    data:img_str
                }
                Ak.postMessage(JSON.stringify(args));
                loading = this.$toast.loading('正在下载...');
                setTimeout(()=>{
                    loading.hide();
                },5000);
            } catch (e) {
                if(loading){
                    loading.hide();
                }
                let token = helper.getToken();
                let url = this.$api_url.server+"/buyer/order/moment?id="+id+"&api_token="+token
                location.href = url;
            }
        },
        onInfinite () {
            if(this.isHasMore && !this.isLoading){
                this.page += 1;
                this.getData();
            }
        },
        initPage(){
            this.page = 0;
            this.isHasMore = true;
            this.data = [];
        },
        handleClickViewDesc(html){
            this.review_desc = html;
            this.showReviewDescDialog = true;
        },
        handleClickViewHis(item){
            this.content_his = item.content;
            if(item.imgs){
                this.img_arr = item.imgs.split(",");
            } else{
                this.img_arr = [];
            }
            this.showDialogHis = true;
        },
        handleClickAdd(item){
            
            this.curr_item = item;
            this.content_his = item.content;
            if(item.imgs){
                this.img_arr = item.imgs.split(",");
            } else{
                this.img_arr = [];
            }
            this.showDialog = true;

        },
        uploadImg(args){
            this.file = args.msg[0];
           
            helper.compressImg(this.file,(data)=>{
                let file = helper.dataURLtoFile(data);
                this.file = file;
            })
        },
        increaseClick(id){
            this.$axios.post(this.$api_url.order_clicked,this.$qs.stringify({
                id: id
            })).then((res)=>{
                if(res.data.code == 0){
                    this.initPage();
                    this.getData();
                }
            }).catch((err)=>{
                console.log(err.message);
            }).then(()=>{
            })
        },
        getData(){
            this.isLoading = true;
            this.$axios.get(this.$api_url.order_list+"?status="+this.sel_group+"&page="+this.page).then((res)=>{
                if(this.data.length == 0){
                    this.data = res.data;
                } else{
                    this.data = this.data.concat(res.data);
                }
                if (res.data.length == 0) {
                    this.isHasMore = false;
                }
            }).catch((err)=>{
                this.$toast.fail(err.message)
            }).then(()=>{
                this.isLoading = false;
            })
        },
        handleClickConfirm(item){
            // if(item.status != 1){
            //     this.$toast.fail("请上传图片");
            //     return;
            // }
            
            if(this.content || this.file){
                let loading = this.$toast.loading();
                let param = new FormData();
                param.append("id",item.id);
                param.append("content",this.content);
                param.append("file",this.file);
                this.$axios.post(this.$api_url.save_order_content,param,{
                    headers: { "Content-Type": "multipart/form-data" }
                }).then((res)=>{
                    if(res.data.code === 0){
                        this.$toast.success(res.data.msg);
                        this.data = [];
                        this.getData();
                    } else{
                        this.$toast.fail(res.data.msg);
                    }
                }).catch((err)=>{
                    this.$toast.fail(err.message);
                }).then(()=>{
                    loading.hide()
                }).then(()=>{
                  let id = item.id;
                  this.$axios.post(this.$api_url.confirm_order_content,this.$qs.stringify({
                      id: id
                  })).then((res)=>{
                      if(res.data.code == 0){
                          this.file = '';
                          this.img_arr = [];
                          this.$toast.success(res.data.msg);
                          this.initPage();
                          this.getData();
                      } else{
                          this.$toast.fail(res.data.msg);
                      }
                  }).catch((err)=>{
                      this.$toast.fail(err.message);
                  }).then(()=>{
                      let random = Math.floor(Math.random()*2000+2000);
                      setTimeout(()=>{
                          loading.hide();
                      },random);
                  })
                })
            }else{
                this.$toast.fail(this.$t('OrderPage.qsctp'));
            }




            
            
            
        },
        handleClickOpenWechat(){
            try{
                let args = {
                    type:'open_wechat',
                    data:''
                }
                Ak.postMessage(JSON.stringify(args));
            } catch (e) {
                location.href="weixin://";
            }
        },
        handleClickThrow(item){
            let loading = this.$toast.loading();
            let id = item.id;
            this.$axios.post(this.$api_url.throw_order,this.$qs.stringify({
                id: id
            })).then((res)=>{
                if(res.data.code == 0){
                    this.$toast.success(res.data.msg);
                    this.initPage();
                    this.getData();
                } else{
                    this.$toast.fail(res.data.msg);
                }
            }).catch((err)=>{
                this.$toast.fail(err.message);
            }).then(()=>{
                loading.hide();
            })
        },
        copyText(class_name){
            let clipboard = new this.$clipboard(class_name);
            clipboard.on('success', ()=> {
                this.$toast.success(this.$t('OrderPage.fzcg'));
            });
            clipboard.on('error', ()=> {
                this.$toast.fail(this.$t('OrderPage.fzsb'));
            });
        },
        handleClickSaveContent(){
            this.showDialog = false;
            if(!this.curr_item){
                return;
            }
            if(this.content || this.file){
                let loading = this.$toast.loading();
                let param = new FormData();
                param.append("id",this.curr_item.id);
                param.append("content",this.content);
                param.append("file",this.file);
                this.$axios.post(this.$api_url.save_order_content,param,{
                    headers: { "Content-Type": "multipart/form-data" }
                }).then((res)=>{
                    if(res.data.code === 0){
                        this.$toast.success(res.data.msg);
                        this.data = [];
                        this.getData();
                    } else{
                        this.$toast.fail(res.data.msg);
                    }
                }).catch((err)=>{
                    this.$toast.fail(err.message);
                }).then(()=>{
                    loading.hide()
                })
            }
        }
    },
    mounted() {
        this.getData();
        this.getRemainCnt();
        // if(window.webkit){
        //     window.webkit.messageHandlers.JSObject.postMessage("show");
        // }
    },
    watch:{
        sel_group(val){
            this.initPage();
            this.getData();
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .page-box{
    padding-top:4.8rem;
    padding-bottom:1.5rem;
    height: 100%;
    background: #fff;
  }
  .top-group{
    width:100%;
    height:2rem;
    padding-top:1rem;
    background: transparent;
    position: relative;
    z-index: 100;
  }
  .task-list{
    text-align: left;
  }
  .bottom-tips{
    height:3rem;
    line-height:3rem;
  }
  .input-box{
    padding:3rem 1rem 2rem 0.6rem;
  }
  .img-history{
    margin-right:0.3rem;
    margin-bottom:0.3rem;
    border:thin dashed #ccc;
    padding:0.3rem;
    max-width: 100%;
    max-height:100%;
  }
  .progress_tips{
    color:#777;
  }
  .progress_tips.success{
    position: absolute;
    right: 0.1rem;
    top: 1.4rem;
  }
  .progress_tips.success img{
    height: 1.5rem;
    width: 1.5rem;
  }
  .slip-main{
    border-bottom:none;
    margin:0.4rem 0;
    border-radius: 0.2rem;
    padding:0;
    border:thin solid #eee;
  }
  .task-list{
    width:100%;
    background-color: #fff;
    overflow: hidden;
    border-radius: 0.2rem;
    position: relative;
    font-size: 0.4rem;
  }
  .task-list li{
    padding: 0.2rem 0.5rem;
  }
  .task-list .task-title{
    padding:0.4rem;
    /*background: linear-gradient(to right, red,orange);*/
    background: url(/static/img/profile-bg.png);
    background-size: 100%;
    color:#000;
  }
  .task-item-bottom{
    background-color: transparent;
    color: #555;
    padding-top: 0;
  }
  .task-item-bottom ul{
    overflow: hidden;
  }
  .task-item-bottom ul li{
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    padding: 0.1rem 0 0.3rem 0;
  }
  .task-item-bottom ul li:last-child{
    border-right:none;
  }
  .money{
    color: #555;
    font-size: 1rem;
    position: absolute;
    /*top: 2rem;*/
    right: 0.3rem;
    font-weight: bold;
  }
  .view-desc{
    padding: 0.1rem 0.2rem;
    border-radius: 0.3rem;
    cursor: pointer;
    color: orange;
  }


  .records{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
  }
  .records .jianbian{
    position: absolute;
    width: 100%;
    height: 5rem;
    background: linear-gradient(1turn,#fff,#bac3d2);
  }
  .records .records_top{
    width: 100%;
    position: relative;
    background-image: url(/static/img/link.png);
    background-size: 100%;
  }
  .records .records_top .records_top1{
    width: 90%;
    margin: auto;
    padding-top: .666667rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: .64rem;
    font-weight: 600;
    color: #2f3848;
  }
  .records .records_top .records_top1 p:nth-of-type(2) {
    color: #434343;
  }
  .records .records_top .records_top1:nth-child(2) {
    font-size: .266667rem;
    font-weight: 400;
    color: #434343;
    padding: .133333rem 0 .333333rem;
  }
  .records .records_top .records_top1:nth-child(2) p:first-of-type {
    opacity: .59;
  }
  .records .records_top .records_top1 p:nth-of-type(2) {
    color: #434343;
  }
  .close-it{
    float: right;
    color: #555;
  }

  .btn-add-photo{
    width: 3.5rem;
    padding: 0.1rem;
    /* display: inline-block; */
    cursor: pointer;
    color: #ffffff !important;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.45);
    -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.45);
    -o-text-shadow: 0 0 1px rgba(0, 0, 0, 0.45);
    -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.45);
    /*box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff6e00, 0 7px #bf3500, 0 8px 2px rgba(0, 0, 0, 0.4);*/
    /*-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff6e00, 0 7px #bf3500, 0 8px 2px rgba(0, 0, 0, 0.4);*/
    /*-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff6e00, 0 7px #bf3500, 0 8px 2px rgba(0, 0, 0, 0.4);*/
    /*-khtml-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff6e00, 0 7px #bf3500, 0 8px 2px rgba(0, 0, 0, 0.4);*/
    border-width: 1px 1px 0;
    border-style: solid;
    border-color: #f34e14;
    border-radius: 0.2rem;
    -moz-border-radius: 0.2rem;
    -webkit-border-radius: 0.2rem;
    -khtml-border-radius: 0.2rem;
    background: -webkit-gradient(linear, left top, left bottom, from(#e87633), to(#ff5200));
    background: linear-gradient(to bottom, #e87633 0%, #ff5200 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdd00', endColorstr='#ff7f00', GradientType=0);
    background: #ef4d14 !important;
    font-size: 0.22rem;
    direction: ltr;
  }

  .btn-submit{
    width: 80%;
    padding: 0.2rem;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.45);
    -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.45);
    -o-text-shadow: 0 0 1px rgba(0, 0, 0, 0.45);
    -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.45);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 7px #bf6000, 0 8px 2px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 7px #bf6000, 0 8px 2px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 7px #bf6000, 0 8px 2px rgba(0, 0, 0, 0.4);
    -khtml-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 7px #bf6000, 0 8px 2px rgba(0, 0, 0, 0.4);
    border-width: 1px 1px 0;
    border-style: solid;
    border-color: #ff8a00;
    border-radius: 0.2rem;
    -moz-border-radius: 0.2rem;
    -webkit-border-radius: 0.2rem;
    -khtml-border-radius: 0.2rem;
    background: -moz-linear-gradient(top, #ffdd00 0%, #ff7f00 100%);
    background: -webkit-linear-gradient(top, #ffdd00 0%, #ff7f00 100%);
    background: -o-linear-gradient(top, #ffdd00 0%, #ff7f00 100%);
    background: -ms-linear-gradient(top, #ffdd00 0%, #ff7f00 100%);
    background: linear-gradient(to bottom, #ffdd00 0%, #ff7f00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdd00', endColorstr='#ff7f00', GradientType=0);
    background-color: #ff9700;
    font-size: 0.35rem;
    direction: ltr;
  }
  .btn-submit:active {
    position: relative;
    top: 3px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 2px #bf6000, 0 3px 2px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 2px #bf6000, 0 3px 2px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 2px #bf6000, 0 3px 2px rgba(0, 0, 0, 0.4);
    -khtml-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 2px #bf6000, 0 3px 2px rgba(0, 0, 0, 0.4);
  }
  .btn-submit:hover {
    position: relative;
    top: 1px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 4px #bf6000, 0 5px 2px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 4px #bf6000, 0 5px 2px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 4px #bf6000, 0 5px 2px rgba(0, 0, 0, 0.4);
    -khtml-box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px #ff8a00, 0 4px #bf6000, 0 5px 2px rgba(0, 0, 0, 0.4);
  }
  .moment-text{
    border:thin solid #eee;
    padding:0.2rem;
    border-radius: 0.1rem;
  }
  .moment-imgs{
    overflow: hidden;
  }
  .moment-imgs dd{
    float:left;
    padding:0.1rem;
    margin:0.1rem;
    border:thin solid #ddd;
    border-radius: 0.1rem;
  }
  .moment-imgs img{
    width:2.2rem;
    height:2.2rem;
  }
  .moment-options{
    overflow: hidden;
  }
  .moment-options ul li{
    float:left;
    text-align: center;
    width:50%;
    background: #efefef;
    cursor: pointer;
  }
  .moment-options ul li:first-child{
    border-right:thin solid #ccc;
    border-top-left-radius: 0.1rem;
    border-bottom-left-radius: 0.1rem;
  }
  .moment-options ul li:last-child{
    border-top-right-radius: 0.1rem;
    border-bottom-right-radius: 0.1rem;
  }

  .click-link{
    background: #3275b1;
    border-radius: 0.1rem;
    padding: 0 0.1rem;
    color: #fff;
  }
  .click-link.clicked{
    background: #bbb;
  }
  .review-box{
    text-align: left;
    padding:1rem;
  }
  .review-box img{
    max-width: 100%;
  }
  .open-wechat{
    color: #fff;
    text-align: center;
    background: #7ad276;
    cursor: pointer;
    border-bottom-left-radius: .1rem;
    border-bottom-right-radius: .1rem;
    height: 1rem;
    line-height: 1rem;
  }

</style>
